<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>会议预约</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/mui.picker.css"/>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/mui.dtpicker.css"/>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/mui.picker.min.css"/>

	<script src="__PUBLIC__/Home/js/mui.min.js"></script>
	<script src="__PUBLIC__/Home/js/jquery.min.js"></script>
	<script src="__PUBLIC__/Home/js/mui.picker.min.js"></script>
	
</head>
<body>
	<div class="mui-content">
	    <div class="mui-input-row mui-search" style="margin-top:20px">
			<input type="text" id="starttime" class="mui-input-clear " placeholder="请选择时间查看会议室占用情况默认当天">
		</div>
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell mui-badge-purple" id="time" style="text-align: center;"></li>
		</ul>
	 	<ul class="mui-table-view mui-grid-view" >
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                <div class="mui-media-body">会议室</div>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                <div class="mui-media-body">上午</div>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                <div class="mui-media-body">下午</div>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                <div class="mui-media-body">晚上</div>
	        </li>
	        
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                <div class="mui-media-body">第一会议室</div>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                <a href="./meetinginfo.html">  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-danger">已满</span></div></a></a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-danger">已满</span></div></a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-primary">未满</span></div></a>
	        </li>
	        
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                <div class="mui-media-body">第二会议室</div>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-danger">已满</span></div></a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-danger">已满</span></div></a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-primary">未满</span></div></a>
	        </li>
	        
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                <div class="mui-media-body">第三会议室</div>
	        </li>
	         <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-danger">已满</span></div></a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-danger">已满</span></div></a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-primary">未满</span></div></a>
	        </li>
	        
	         <li class="mui-table-view-cell mui-media mui-col-xs-3"> 
	                <div class="mui-media-body">第四会议室</div>
	        </li>
	         <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-danger">已满</span></div></a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-danger">已满</span></div></a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-3">
	                  <a href="./meetinginfo.html"><div class="mui-media-body"><span class="mui-badge mui-badge-primary">未满</span></div></a>
	        </li>
	    </ul>    
		
		<ul class="mui-table-view" id="view">
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right" style="text-align: center;">查看领导空闲状态</a>
			</li>
		</ul>
		 <ul class="mui-table-view mui-grid-view" id="lindao" style="display: none;">
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body">领导</div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body">上午</div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body">下午</div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body">晚上</div>
		        </li>
		        
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body">领导一</div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-primary">空</span></div>
		        </li>
		        
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body">领导二</div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-primary">空</span></div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
		        </li>
		        
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body">领导三</div>
		        </li>
		         <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-primary">空</span></div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
		        </li>
		        
		         <li class="mui-table-view-cell mui-media mui-col-xs-3"> 
		                <div class="mui-media-body">领导四</div>
		        </li>
		         <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">
		                <div class="mui-media-body"><span class="mui-badge mui-badge-danger">忙</span></div>
		        </li>
	    </ul>    
	</div>
	
	<script type="text/javascript">
		mui.init();
		var time1 = new Date();
		var startz = time1.getDay();
		var startz1;
		if(startz === 0){
			startz1 = -7;
		}else{
			startz1 = -startz;
		}
		var end = 7 - startz;
		var time = time1.getTime();  
		startz = new Date(time + startz1*24*3600*1000); 
		end = new Date(time + end*24*3600*1000);
		
		
		
		var zhou = new Date();
		var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];   
		var zhouindex =  arr[zhou.getDay()];
		var y  = zhou.getFullYear();
		var mm = zhou.getMonth()+1;
		var dd = zhou.getDate();
		document.getElementById('time').innerText= y+'-'+mm+'-'+dd+'   '+zhouindex;
		var dtpicker = new mui.DtPicker({
		    type: "date",//设置日历初始视图模式 
		    beginDate: new Date(zhou.getFullYear(),zhou.getMonth(),zhou.getDate()),//设置开始日期 
		    endDate: new Date(end.getFullYear(),end.getMonth(),end.getDate()),//设置结束日期 
		    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语   
		    customData: { 
		        
		    }//时间/日期别名 
		}) 
		dtpicker.hide(function(e) {
		    console.log(e);
	    }) 
		document.getElementById('starttime').addEventListener('tap',function(){
			dtpicker.show(function(e) { 
				document.getElementById('starttime').value= e.text;
				var zhou1 = new Date(e.text);
				var arr1 = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
				var zhouindex1 =  arr1[zhou1.getDay()];
			    document.getElementById('time').innerText= e.text+'  '+zhouindex1;
			  }) 
		})
		$(function(){
		$('#view').click(function(){
			$('#lindao').toggle();
		})
			
		})
	</script>
</body>
<style>
	body{
		font-family: "微软雅黑";
	}
</style>
</html>